// 模拟数据
const rankData = {
    '雷达操纵师排行榜': [],
    '精英指挥员排行榜': [],
    '进步之星排行榜': []
};
const studentName1 = ["张伟豪", "黄梓晨", "吴雨泽", "郑博文", "冯子墨", "董宇航", "唐靖宇", "袁伟泽", "叶明远", "李若萱"];
const studentName2 = ["陈浩然", "王俊杰", "赵思远", "孙启铭", "韩子墨", "潘星辰", "许浩然", "邓志远", "曹雨晨", "李强"];
const studentName3 = ["李明哲", "刘子轩", "周宇澄", "钱嘉豪", "陈思成", "蒋宇恒", "蔡明辉", "于昊然", "宋子豪", "张敏"];
const score1 = [97, 95, 94, 92, 91, 89, 88, 85, 83, 81];
const score2 = [99, 98, 96, 93, 90, 87, 86, 84, 82, 80];
const score3 = [94, 93, 92, 91, 90, 88, 87, 86, 85, 83];
for (let i=0; i < 10; i++) {
    rankData['雷达操纵师排行榜'].push({name: studentName1[i], score:score1[i]});
}
rankData['雷达操纵师排行榜'][0].photo = 'picture/1.jpg';
for (let i=0; i < 10; i++) {
    rankData['精英指挥员排行榜'].push({name: studentName2[i], score:score2[i]});
}
rankData['精英指挥员排行榜'][0].photo = 'picture/2.jpg';
for (let i=0; i < 10; i++) {
    rankData['进步之星排行榜'].push({name: studentName3[i], score:score3[i]});
}
rankData['进步之星排行榜'][0].photo = 'picture/4.jpg';

document.addEventListener('DOMContentLoaded', () => {
    // 点击事件绑定
    document.getElementById('knowledgeChart').addEventListener('click', () => {
        document.getElementById('rankModal').style.display = 'block';
        renderRankings();
    });

    // 关闭事件
    document.querySelector('.close').addEventListener('click', (e) => {
        e.stopPropagation(); // 阻止事件冒泡
        document.getElementById('rankModal').style.display = 'none';
    });
});

// 渲染排名
function renderRankings() {
    const container = document.querySelector('.rank-columns');
    container.innerHTML = '';
    
    Object.keys(rankData).forEach(title => {
        const col = document.createElement('div');
        col.innerHTML = `<h3>${title}</h3>`;
        
        rankData[title].forEach((student, index) => {
            const rankClass = `rank-${index+1}`;
            const item = document.createElement('div');
            item.className = `rank-item ${index > 2 ? 'rank-other' : rankClass}`;
            
            let content = `${index+1}. ${student.name} (${student.score}分)`;
            if(index === 0 && student.photo) {
                content = `
                    <img src="${student.photo}" class="avatar">
                    <div>${content}</div>
                `;
            }
            
            item.innerHTML = content;
            col.appendChild(item);
        });
        
        container.appendChild(col);
    });
}